@use "./reset";
@use "./transition";
@use "./themes";

body {
	background: url("@/assets/images/img1.jpg") center center / cover;
}
#app {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: transparent;
}
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
::-webkit-scrollbar-track {
	border-radius: 10px;
}
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: #0003;
	border-radius: 10px;
	transition: all 0.2s ease-in-out;
}
.placeholder {
	color: #808080 !important;
}
button {
	&.primary {
		padding: 0 10px;
		color: #fff;
		font-size: 16px;
		height: 40px;
		background-color: var(--primary-color);
		border-radius: 4px;
		transition: background-color 0.2s;
		box-shadow: 0 0 3px 1px #ccc;
		&:hover {
			background-color: var(--lighten-primary-color);
		}
	}
	&.success {
		padding: 0 10px;
		color: #fff;
		font-size: 16px;
		height: 40px;
		background-color: var(--success-color);
		border-radius: 4px;
		transition: background-color 0.2s;
		box-shadow: 0 0 3px 1px #ccc;
		&:hover {
			background-color: var(--lighten-success-color);
		}
	}
}
table {
	width: 100%;
	background-color: #fff;
	th {
		padding: 0 6px;
		height: 40px;
		border: 1px solid #ccc;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
	}
	td {
		padding: 0 6px;
		height: 40px;
		border: 1px solid #ccc;
		text-align: center;
	}
}
